﻿@using ST = EmoneyWeiXinCommon.StringTools;
@{
    ViewBag.Title = "订阅统计页面";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="@ST.GetStaticFile("Scripts/highcharts.js")"></script>
<script type="text/javascript" src="@ST.GetStaticFile("My97DatePicker/WdatePicker.js")"></script>
<div class="right">
    <h3>每日订阅统计</h3>
    <!--manage-->
    <div class="manage">
        <!--manage_top-->
        <div class="manage_top">
            <ul class="manage_top_ul">
            </ul>
            <div class="manage_register">
                @{
                    DateTime today = DateTime.Now.AddDays(1);
                    DateTime yesterday = today.AddDays(-1);
                }
                <p><span>发布时间：</span><input type="text" class="manage_register_text" onfocus="WdatePicker()" id="txt_startTime" value="@yesterday.ToString("yyyy-MM-dd")"><span class="manage_register_font">至</span><input type="text" class="manage_register_text" onfocus="WdatePicker()" id="txt_endTime"  value="@today.ToString("yyyy-MM-dd")"/></p>
            </div>
            <p class="manage_add orderType">
                <a href="#" tradetype="H">按小时</a>
                <a class="manage_add_font" tradetype="D" href="#">按天</a>
                <a class="manage_add_font" tradetype="W" href="#">按周</a>
                <a class="manage_add_font" tradetype="M" href="#">按月</a>
            </p>
        </div>
        <!--manage_top end-->
        <p class="manage_line"></p>
        <!--manage_bottom-->
        <div class="manage_bottom">
            <!--manage_chart-->
            <div class="manage_chart">
                <div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
            </div>
            <!--manage_chart end-->
            <!--manage_bottom_title-->
            <div class="manage_bottom_title">
                <p>关注人数合计：<span class="green" id="sum1">0</span>人    累积关注人数：<span class="red" id="sum2">0</span>人    取消关注人数：<span class="red" id="sum3">0</span>人</p>
            </div>
            <!--manage_bottom_title end-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="dataTable">
                <tr>
                    <th><span>时间</span></th>
                    <th><span>用户订阅</span></th>
                    <th><span>取消订阅</span></th>
                    <th><span>取消率</span></th>
                    <th><span>净增长</span></th>

                </tr>



            </table>
            <div id="manage_page" class="manage_page">
                <ul>
                    <li class="manage_page_left"><i class="icon iconfont">&#xe601;</i></li>
                    <li class="manage_page_center"><span>0</span> /<span> 0</span></li>
                    <li class="manage_page_right"><i class="icon iconfont">&#xe600;</i></li>
                    <li>
                        <input type="text"></li>
                    <li><a href="#" class="tiaozhuan">跳转</a></li>
                </ul>
            </div>
        </div>
        <!--manage_bottom end-->
    </div>
    <!--manage end-->
</div>


<script type="text/javascript">
    var weixinid = "";
    var pageIndex = 1;
    var pageSize = 24;
    var pageCount = 1;
    var totalCount = 0;
    var orderType = "H";
    var getUserMenuUrl = "@ST.GetTrendsFile("BaseConfiguration/WeixinUserMemu")" + "?random=" + Math.random();
    var viewBagWeixinId = "@ViewBag.weixinid";
    var getTJBusinessDataUrl = "@ST.GetTrendsFile("TJBusiness/GetStDetailList")";
    $(document).ready(function () {
        createMemu();
        initEvents();

        if (checkSubmit) {
            getUserTjScanData();
        }
    });




    function getContentMemu() {
        $(".manage_top_ul .manage_top_A").each(function () {
            weixinid = $(this).attr("typeid");
        })
    }
    //创建labs
    function createMemu() {
        $.ajax({
            type: "get",
            url: getUserMenuUrl,
            async: false,
            data: { weixinid: viewBagWeixinId },
            dataType: "html",
            success: function (result) {
                $(".manage_top_ul").html(result);
                $(".manage_top_ul li").click(function () {
                    $(".manage_top_ul li").removeClass("manage_top_A");
                    $(this).addClass("manage_top_A");
                    getContentMemu();

                    if (checkSubmit()) {
                        pageIndex = 1;
                        getUserTjScanData();

                    }
                })
                getContentMemu();
            }
        });
    }


    //翻页
    function PageCountHtml() {
        pageCount = Math.ceil(totalCount / pageSize);
        if (pageCount == 0) {
            pageCount = 1;
        }
        $("#manage_page").html(PageHtml(pageIndex, pageCount));
        $("#manage_page .manage_page_right").on("click", function () {
            pageIndex = pageIndex + parseInt($(this).attr("tname"));
            // $("#manage_page").html(PageHtml(pageIndex, pageCount));
            if (checkSubmit) {
               getUserTjScanData();
            }
        });

        $("#manage_page .tiaozhuan").click(function () {
            var pageNum = $("#txtPageNum").val();
            var tempIndex;
            try {
                tempIndex = parseInt(pageNum);
            } catch (e) {
                alert("请输入数字");
                return false;
            }

            if (pageNum > 0 && pageNum <= pageCount) {
                pageIndex = tempIndex;
                $("#manage_page").html(PageHtml(pageIndex, pageCount));
                if (checkSubmit) {
                  getUserTjScanData();
          
                }
            }
            else {
                alert("当前数字超出范围");
                return false;
            }

        });

    }

    function initEvents() {
        //按小时，按天，按周，按月的点击事件
        $(".orderType a").click(function () {
            var $tag = $(this);
            var seltype = $tag.attr("tradetype");
            //如果选择的与当前的不同，
            //   if (seltype != orderType) {
            $(".orderType a").each(function (index, obj) {
                $(obj).addClass("manage_add_font");
            });
            $tag.removeClass("manage_add_font");
            orderType = seltype;
            switch (orderType) {
                case "H": pageSize = 24; break
                case "D": pageSize = 30; break
                case "W": pageSize = 4; break
                case "M": pageSize = 12; break

            }

            if (checkSubmit) {
                pageIndex = 1;
             getUserTjScanData();
              
            }
            // }

        });



    }



    //重画页面
    function render(dataResult) {

        totalCount = dataResult.totalCount;
        var data = dataResult.data;

        //显示总数
        $("#sum1").text(dataResult.subSum - dataResult.unSubSum);

        $("#sum2").text(dataResult.subSum);

        $("#sum3").text(dataResult.unSubSum);

        var itemArry = [];   //日期数组
        var dyArry = []; //订阅集合
        var qxdyArry = [];//取消订阅
        var jzzArry = [];

        var $dataTable = $("#dataTable"); //获取到显示数据的表格
        $dataTable.find("tr:gt(0)").remove();

        for (var i = 0; i < data.length; i++) {
            var theObj = data[i];
            itemArry.push(theObj.ItemName);
            dyArry.push(theObj.SubscribeCount);
            qxdyArry.push(theObj.UNSubscribeCount);
            jzzArry.push(theObj.SubscribeCount - theObj.UNSubscribeCount);

            createDataRow($dataTable, theObj);
        }

        PageCountHtml();
        setHighCharts(itemArry, dyArry, qxdyArry, jzzArry);

        //显示总数

    }

    function createDataRow($table, rowData) {
        var unsubPer = 0;
        if (rowData.SubscribeCount != 0) {
            var unsubPer = ((rowData.UNSubscribeCount * 1.0 / rowData.SubscribeCount) * 100).toFixed(2) + "%";
        } else {
            unsubPer = "----"
        }
        var str = "<tr><td>" + rowData.ItemName + "</td><td>" + rowData.SubscribeCount + "</td><td>" + rowData.UNSubscribeCount + "</td><td>" + unsubPer + "</td><td>" + (rowData.SubscribeCount - rowData.UNSubscribeCount) + "</td></tr>";
        var $newTr = $(str);
        $table.append($newTr);

    }

    function dateFomart() {

    }


    //获取数据
    function getUserTjScanData() {
        var startTime = $("#txt_startTime").val();
        var endTime = $("#txt_endTime").val();
        var postData = { size: pageSize, index: pageIndex, startTime: startTime, endTime: endTime, tradeType: orderType, weixinID: weixinid };

        $.ajax({
            type: "post",
            url: getTJBusinessDataUrl,
            data: postData,
            dataType: "json",
            success: function (result) {
                render(result);
            }
        });
      
    }

    //验证是否能提交查询
    function checkSubmit() {
        var flag = true;
        var startTime = $("#txt_startTime").val();
        if (startTime == "") {
            alert("请选择开始日期");
            flag = false;
        }
        return flag;
    }
</script>


@*图标相关*@
<script type="text/javascript">

    function setHighCharts(itemArry, dyArry, qxDyArry, jzzlArry) {
        $('#container').highcharts({
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: itemArry
            },
            yAxis: {
                title: {
                    text: null
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    var s = '<b>' + this.x + '</b>';
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' +
                            this.y;
                    });

                    return s;
                },
                shared: true
            },
            series: [{
                name: '用户订阅',
                color: '#2255a4',
                data: dyArry
            }, {
                name: '取消订阅',
                color: '#09af48',
                data: qxDyArry
            }, {
                name: '净增长量',
                color: '#666666',
                data: jzzlArry
            }],
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            }
        });

    }

</script>
